 <template>
  <div>
    <el-row>
      <el-form
        :model="selectLabelForm"
        label-width="80px"
        style="width: 100%"
        inline
      >
        <el-row>
          <el-col :xl="6" :lg="6" :md="12">
            <el-form-item>
              <el-row :gutter="5">
                <el-col :xl="11" :lg="10" :md="10">
                  <el-input disabled value="井名" />
                </el-col>
                <el-col :xl="11" :lg="12" :md="12">
                  <el-input v-model="wellName" clearable />
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="12">
            <el-form-item>
              <el-row :gutter="5">
                <el-col :xl="11" :lg="10" :md="10">
                  <el-input disabled value="套管尺寸" />
                </el-col>
                <el-col :xl="11" :lg="12" :md="12">
                  <el-input v-model="caseSize" clearable />
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xl="6" :lg="6" :md="6">
            <el-form-item>
              <el-button
                class="top-btn"
                size="small"
                type="primary"
                @click="onSubmit"
                >确定查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <el-row>
      <el-table :data="tableData" border style="width: 100%; font-size: 10px">
        <el-table-column
          fixed
          prop="wellName"
          label="井名"
          width="120"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="platformType"
          label="平台类型"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="holeSize"
          label="井眼尺寸"
          width="100"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="caseSize"
          label="套管尺寸"
           width="100"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="workType"
          label="作业类型"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="operator"
          label="作业者"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="contractor"
          label="服务商"
          width="80"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="platform"
          label="平台号"
          width="80"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="workDate"
          label="施工日期"
          width="100"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="reportDate"
          label="报告日期"
          width="100"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="checkStatus"
          label="数据状态"
          width="80"
          header-align="center"
        ></el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="toReport(scope.row)">
              报表数据
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="toDataDetail(scope.row)"
            >
              综合数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-base">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="form.pageIdx"
          :page-size="form.pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>
<script>
import { getmyinput } from '@/api/module/data_validate'
import { GetName } from '@/api/module/gettreedata'
//import WellReport from "../../page/dataQuery/wellQuery/reportComponents";

export default {
  data() {
    return {
      form: {
        wellName: '',
        caseSize: '',
      },
      validateform: {
        wellName: '',
        caseSize: '',
      },
      user: '',
      caseSize: '',
      wellName: '',
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      selectLabelForm: {},
    }
  },
  mounted() {
    this.getName()
  },
  //   created() {
  //     this.loaddata(
  //       this.user,
  //       this.pager.pageNum,
  //       this.pager.pageSize,
  //       this.form
  //     );
  //   },
  methods: {
    // ----------- 查询数据方法 ----------------
    // 1. 获取列表数据
    loaddata(user, pageNum, pageSize, form) {
      getmyinput(user, pageNum, pageSize, form)
        .then((res) => {
          this.tableData = res.data.data.basicList
          this.total = res.data.data.totalNumber
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 2. 获取用户
    getName() {
      GetName()
        .then((res) => {
          this.user = res.data.username
          this.loaddata(
            this.user,
            this.pager.pageNum,
            this.pager.pageSize,
            this.form
          )
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // ------------------- 点击事件函数 ----------------------
    // 1. 分页
    handlePageChange(page) {
      this.pager.pageNum = page
      this.loaddata(page, this.pager.pageSize, this.form)
    },
    loadFilterParams() {
      // 从query读取过滤条件
      // this.filterQuery = {...filterQuery, ...this.$route.query}
      // 从query中取到的参数是string的,要转成element要求的number
      this.form = {
        ...this.form,
        pageIdx: parseInt(this.form.pageIdx, 10),
        pageSize: parseInt(this.form.pageSize, 10),
      }
      console.log(this.form)
    },
    // 2. 确定查询
    onSubmit() {
      this.form.wellName = this.wellName
      this.form.caseSize = this.caseSize
      this.pager.pageNum = 1
      this.loaddata(
        this.user,
        this.pager.pageNum,
        this.pager.pageSize,
        this.form
      )
    },
    // 3. 查看报表
    toReport(row) {
      this.$router.push({
        name: 'detailReport',
        params: {
          id: row.wellName,
          casingSize: row.caseSize,
          filterForm: this.form,
          pager: this.pager,
        },
      })
    },
    // 4. 查看数据详情
    toDataDetail(row) {
      this.$router.push({
        name: 'dataDetail',
        params: {
          id: row.wellName,
          casingSize: row.caseSize,
          filterForm: this.form,
          pager: this.pager,
        },
      })
    },
  },
}
</script>

<style scoped>
.top-btn {
  margin: 0px 10px 10px 10px;
}
.el-form-item {
  margin: 5px;
  /* margin: 5px !important; */
}
.header {
  background-color: #eef0f6;
  margin-bottom: 10px;
  padding-top: 5px;
  position: relative;
}
</style>
